<template>
  <view class="container">
    <!-- ------------------------ 顶部视频-开始 ------------------------ -->
    <view class="video_box">
      <video autoplay loop :muted="true" object-fit='cover' :controls="false" :enable-progress-gesture="false"
        class="videoCss" :src="videoUrl"></video>
      <view class="title-box">
        <view class="img-box">
          <image class="img" mode="aspectFit" v-if="carDetailInfo.ve_name === '009'"
            src="https://www.kamlung.net/images/zeekr/car/ZEEKR_009_t_w.png"></image>
          <image class="img" mode="aspectFit" v-if="carDetailInfo.ve_name === 'X'"
            src="https://www.kamlung.net/images/zeekr/car/ZEEKR_X_t_w.png"></image>
          <!-- <view class="img-title" v-if="carDetailInfo.ve_name === 'X'">新奢全能SUV<text></text></view> -->
        </view>
        <!-- <view class="title">{{ carDetailInfo.vem_name }}</view> -->
        <!-- <view class="title">{{ carDetailInfo.ve_name }}</view> -->
        <!-- <view class="title-sub" v-if="carDetailInfo.ve_name === 'X'">新奢全能SUV<text></text></view> -->
        <!-- <view class="title-sub" v-if="carDetailInfo.ve_name === '009'">全球首款原生纯电豪华MPV</view> -->
      </view>
    </view>
    <!-- ------------------------ 顶导航-开始 ------------------------ -->
    <view class="nav_top">
      <view class="nav nav1" @click="goComputeMoney">
        <uni-icons custom-prefix="iconfont2" type="icon-52" color="#222" size="46rpx"></uni-icons>
        <view class=" nav-text">提车金额</view>
      </view>
      <view class="nav nav2" @click="goCatModelContr">
        <uni-icons custom-prefix="iconfont2" type="icon-qiche" color="#222" size="56rpx"></uni-icons>
        <view class=" nav-text">车型对比</view>
      </view>
      <view class="nav nav3" @click="goCarModleShare">
        <uni-icons custom-prefix="iconfont2" type="icon-fenxiang" color="#222" size="56rpx"></uni-icons>
        <view class=" nav-text">车型分享</view>
      </view>
    </view>
    <!-- ------------------------ 车型详情-开始 ------------------------ -->
    <view v-for="(item, index) in detailImg" :key="item.id">
      <!-- ------------------------ 轮播图-开始 ------------------------ -->
      <detail-swiper v-if="item.isText" :imgInfo="item.more_valImg" :config="item.config" :powerSystem="tempData[0]" />
      <!-- ------------------------ 单图-开始 ------------------------ -->
      <view v-if="item.isImage" class="img-box2" :itemIndex=index>
        <image lazy-load class="img" mode="aspectFill" :src="item.img"></image>
      </view>
      <!-- ------------------------ 多图-开始 ------------------------ -->
      <detail-image v-if="item.isTitle" :imgInfo="item" :powerSystem="tempData[0]" />
      <!-- ------------------------ 详情视频-开始 ------------------------ -->
      <detail-video v-if="item.isVideo" :videoInfo="item" :powerSystem="tempData[0]" />
    </view>
    <view class="goSubscribe" @click="goSubscribe">预约试驾</view>
  </view>
</template>

<script>
let brand = 'ZEEKR'
let brand_id = 52
import {
  codeApi,
  brandCarsDetails,
  brandCarsParamDetails,
  getCarParameListApi
} from '@/API/carSeries'
import { mapMutations } from 'vuex'
import { changeUrl } from '@/utils/utils'
import DetailSwiper from "./components/DetailSwiper";
import DetailImage from "./components/DetailImage";
import DetailVideo from "./components/DetailVideo";
// import logo007 from '@/static/logo-007.png'
// import logo009 from '@/assets/img/type2.jpg'

export default {
  components: { DetailSwiper, DetailImage, DetailVideo },
  data() {
    return {
      // logo007: logo007,
      // 基础路径
      baseUrl: this.$baseUrl,
      imgBaseUrl: `${this.$baseUrl}/images/${brand}/car/`,
      bntDis: true,
      index: 0,
      dataIndex: 0,
      tempData: {},
      parameList: [],
      currIndex: 0,
      carDetailInfo: {},
      veStyle: [],
      imgInfo: [],
      codeParam: {
        brand,
        vem_vid: '',
        vem_id: '',
        ves_id: ''
      },
      // 小程序码
      codeUrl: '',
      // 动力传动系统
      // powerSystem: []
    }
  },
  onLoad(option) {


    let param = decodeURIComponent(option.scene)
    let sharePath = ''
    // 二维码识别,进入
    if (option.scene) {
      let temp = changeUrl(param)
      let { ve_id, vemId, vemVid } = temp
      this.codeParam.vem_id = +vemId
      this.codeParam.vem_vid = +vemVid
      this.getBrandCarsDetails(+ve_id, +vemId, +vemVid, brand_id)
      sharePath = `vemVid=${vemVid}&vemId=${vemId}&ve_id=${ve_id}`
    } else {
      let { ve_id, vemId, vemVid, } = option
      // 有参数则请求详情
      this.codeParam.vem_id = +vemId
      this.codeParam.vem_vid = +vemVid
      this.getBrandCarsDetails(+ve_id, +vemId, +vemVid, brand_id)
      sharePath = `vemVid=${vemVid}&vemId=${vemId}&ve_id=${ve_id}`
    }
    this.shareMixin.title = `汽车详情`
    this.shareMixin.query = sharePath
    this.shareMixin.path = '/CarModel/CarDetail'
  },
  methods: {
    // 集团品牌车型(详情)
    async getBrandCarsDetails(ve_id, vem_id, vem_vid, brand_id) {
      const {
        data: { data, code }
      } = await brandCarsDetails({ ve_id, vem_id, vem_vid, brand_id })
      if (code == 200) {
        // 大类参数列表
        this.getCarParameList()
        let { info, ve_style = [], img_infoVals = [] } = data
        this.carDetailInfo = info
        this.veStyle = ve_style
        for (let i = 0; i < img_infoVals.length; i++) {
          img_infoVals[i].more_valImg = JSON.parse(img_infoVals[i].more_valImg)
          // img_infoVals[i].position = JSON.parse(img_infoVals[i].position)
        }
        this.imgInfo = img_infoVals
        console.log('img_infoVals :>> ', img_infoVals);
        // 集团品牌车型(参数详情)
        this.brandCarsParamDetailsFn(ve_style[0])
        // 保存到vuex
        this.saveCarDetail(this.carDetailInfo)
        this.saveCarVeStyle(this.veStyle)
      }
    },
    // 集团品牌车型(参数详情)
    async brandCarsParamDetailsFn({ ve_id, vem_id, ves_id }) {
      const {
        data: { data }
      } = await brandCarsParamDetails({ ve_id, vem_id, state: 1 })
      let tempObj = {}
      console.log('data.prop_parameterValALL :>> ', data.prop_parameterValALL);


      for (let j = 0; j < data.prop_parameterValALL.length; j++) {

        // 动力传动系统
        let param = data.prop_parameterValALL[j].prop_parameterVal
        if (j === 0) {
          // this.powerSystem = param.filter(item => item.propt_parent_id === 14500)
        }
        this.$set(this.tempData, j, param)
        tempObj[j] = param
      }

      // 小程序码-参数
      this.codeParam.ves_id = +ves_id
      // 小程序码-函数
      this.getCodeApi()
      // 车型的详情参数,保存到vuex用于对比
      this.saveCarsParamAll(tempObj)
      // 保存到vuex
      this.saveCarParaList(this.parameList.slice(0, 5))
    },
    // 大类参数列表
    async getCarParameList() {
      const {
        data: { data }
      } = await getCarParameListApi({ brand_id })
      this.parameList = data.prop_parameter
    },
    // 小程序码
    async getCodeApi() {
      const {
        data: { data }
      } = await codeApi(this.codeParam)
      this.codeUrl = data
      // console.log('url33', data)
    },
    // 去预约试驾
    goSubscribe() {
      uni.navigateTo({
        url: '/pages/TestDrive/TestDrive'
      })
    },
    onClick(type) {
      this.$refs.popup.open('bottom')
    },
    bindPickerChange(e) {
      this.dataIndex = e.detail.value
    },
    filterParam(e) {
      let temp = this.tempData[this.dataIndex] || []
      return temp.filter(item => item.propt_parent_id == e) || []
    },
    // ------------------------ 去车型比较-开始 ------------------------
    goCatModelContr() {
      let { vem_vid, vem_id } = this.codeParam
      uni.navigateTo({
        url: `/CarModel/CatModelContr?vemVid=${vem_vid}&vemId=${vem_id}`
      })
    },
    // ------------------------ 海报分享-开始 ------------------------
    goCarModleShare() {
      let { vem_name, ex_type, cover_piiic_img } = this.carDetailInfo
      let { vem_id, vem_vid } = this.codeParam
      let item = {
        vesName: vem_name,
        vemId: vem_id,
        vemVid: vem_vid,
        codeUrl: `${this.baseUrl}/${this.codeUrl}`,
        headImg: `${this.imgBaseUrl}${cover_piiic_img}`,
      }
      uni.navigateTo({
        url: `/CarModel/CarModleShare?item=${encodeURIComponent(
          JSON.stringify(item)
        )}`
      })
    },
    // ------------------------ 提车金额-开始 ------------------------
    goComputeMoney() {
      let { vem_name, price_range } = this.carDetailInfo
      uni.navigateTo({
        url: `/pages/CartCompute?CartModel=${vem_name}&price=${price_range}`
      })
    },
    // ------------------------ 去预约试驾-开始 ------------------------
    goSubscribe() {
      let { vem_name, cover_piiic_img } = this.carDetailInfo
      let img_src = `${this.imgBaseUrl}${cover_piiic_img}`
      uni.navigateTo({ url: `/pages/TestDrive/TestDrive?img_src=${img_src}&ve_name=${vem_name}` })
      // uni.navigateTo({ url: '/pages/TestDrive/TestDrive' })
    },
    selectImg(i) {
      this.currentCart = i
    },
    ...mapMutations(['saveCarDetail', 'saveCarVeStyle', 'saveCarsParamAll', 'saveCarParaList'])
  },
  computed: {
    // 顶部视频
    videoUrl() {
      let { video_url } = this.carDetailInfo
      if (!video_url) return ''
      return `${this.imgBaseUrl}${video_url}`
    },
    // 详情图片
    detailImg() {
      let imgList = []
      let imgInfo = this.imgInfo
      let baseUrl = this.imgBaseUrl
      let imgUrl = this.carDetailInfo?.cover_piiic_img_int?.split(';') || []
      // myMark: "1_1x1_black.png"
      for (let i = 0; i < imgUrl.length; i++) {
        // imgUrl[i]
        let index = imgInfo.findIndex(item => item.myMark === imgUrl[i])
        if (index < 0) {
          imgList.push({ id: i + 1, img: `${baseUrl}${imgUrl[i]}`, isImage: true })
        } else {
          if (imgInfo[index].myMark.substring(2) === '1x1_black.png') {
            imgInfo[index].isText = true
            imgList.push(imgInfo[index])
          } else {
            if (imgInfo[index].video) {
              imgInfo[index].isVideo = true
              imgList.push(imgInfo[index])
            } else {
              imgInfo[index].isTitle = true
              imgList.push(imgInfo[index])
            }
          }
          // v-if="item.myMark.substring(2) === '1x1_black.png'"
          // return string.includes(substring);
          // imgInfo[index].text = true
          // imgList.push(imgInfo[index])
        }
      }
      return imgList
    },
  },
}
</script>

<style lang="scss" scoped>
// ::v-deep .u-line {
// }
.container {
  // position: relative;
  padding-bottom: 300rpx;
}

// ------------------------ 顶部视频-开始 ------------------------
.video_box {
  height: 100vh;
  position: relative;

  .videoCss {
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }

  .title-box {
    width: 90%;
    position: absolute;
    top: 180rpx;
    left: 5%;
    text-align: center;
    color: #fff;

    .img-box {
      width: 60%;
      margin: 0 auto;

      .img {
        width: 100%;
        height: 100%;
        height: 60rpx;
      }

      // .img-title {
      //   font-size: 38rpx;
      //   text-align: justify;

      //   text {
      //     display: inline-block;
      //     width: 100%;
      //   }
      // }
    }


    .title {
      font-size: 48rpx;
      line-height: 80rpx;
      // font-weight: 600;
      // font-family: 'LynkcoType-Medium';
    }

    // .title-sub {
    //   width: 80%;
    //   font-size: 38rpx;
    //   text-align: justify;

    //   // font-weight: 500;
    //   // font-family: 'LynkcoType-Medium';
    //   text {
    //     display: inline-block;
    //     width: 100%;
    //   }
    // }

  }


}

// ------------------------ 顶导航-开始 ------------------------
.nav_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0;
  text-align: center;

  .nav {
    width: 300%;

    &-text {
      line-height: 80rpx;
    }
  }
}



// .power-system-color {
//   color: #999 !important;
// }

.img-box2 {
  width: 100%;
  height: 100vh;
  // overflow: hidden;
  // background-color: #f00;

  .img {
    width: 100%;
    height: 100%;
  }
}

// ------------------------ 预约试驾按钮-开始 ------------------------
.goSubscribe {
  position: fixed;
  bottom: 80rpx;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90%;
  text-align: center;
  font-weight: 600;
  line-height: 90rpx;
  background-color: #000;
  color: #fafafa;
  font-size: 32rpx;
  z-index: 1000;
}
</style>
